<template>
  <slot></slot>
  <div ref="jcWebFaceMasksRef" v-if="_showMask" :style="style" class="jc-web-face-masks"></div>
</template>

<style lang="ts">
export default {
  name: 'UseMasks'
}
</style>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { useMaskStore } from './store'

const { bgColor, opacity, maskIndex, _showMask } = storeToRefs(useMaskStore())

const style = ref(
  `--jc-web-face-masks-bgColor:${bgColor.value}; --jc-web-face-masks-index:${maskIndex.value}; --jc-web-face-masks-opacity:${opacity.value}`
)
</script>

<style lang="scss" scoped>
.jc-web-face-masks {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: var(--jc-web-face-masks-index);
  background-color: var(--jc-web-face-masks-bgColor);
  opacity: var(--jc-web-face-masks-opacity);
}
</style>
